Motion >> Repos - motion-next.git/blob

   1 <!-- WIDGET INBOUND -->
   2 <div class="dashboard-container md-background-bg md-whiteframe-1dp">
   3   <div class="pb-16" layout="row" layout-align="start center">
   4     <md-icon md-font-icon="icon-phone-outgoing" class="m-0 mr-16"></md-icon>
   5     <div
   6       class="h2 secondary-text"
   7       translate="DASHBOARDS.TODAY_MOTION_BULL_STATS"
   8     >
   9       Today Motion Bull STATS
  10     </div>
  11   </div>
  12
  13   <!-- WIDGET GROUP -->
  14   <div class="widget-group" layout="row" flex="100" layout-wrap>
  15     <!-- WIDGET 1 -->
  16     <ms-widget
  17       flippable="true"
  18       layout="column"
  19       flex="100"
  20       flex-gt-xs="50"
  21       flex-gt-md="20"
  22     >
  23       <!-- Front -->
  24       <ms-widget-front class="grey-50-bg">
  25         <div
  26           class="ph-8 pv-16 h-55"
  27           layout="row"
  28           layout-align="space-between center"
  29         >
  30           <md-button
  31             class="md-icon-button"
  32             ng-click="flipWidget()"
  33             aria-label="more"
  34           >
  35             <md-icon md-font-icon="icon-dots-vertical"></md-icon>
  36           </md-button>
  37           <md-button
  38             style="cursor: auto"
  39             class="md-icon-button"
  40             aria-label="more"
  41           >
  42             <md-icon md-font-icon="icon-timelapse"></md-icon>
  43           </md-button>
  44         </div>
  45
  46         <div class="pt-8 pb-32" layout="column" layout-align="center center">
  47           <div class="light-blue-fg font-size-52 line-height-72">
  48             {{vm.inbound.waiting || 0}}
  49           </div>
  50           <div class="h3 secondary-text font-weight-500">
  51             {{'DASHBOARDS.VOICE_WAITING' | translate | uppercase}}
  52           </div>
  53         </div>
  54
  55         <div
  56           class="p-16 grey-200-bg text-center border-top"
  57           layout-align="start center"
  58         >
  59           <span class="h6 light-blue-fg secondary-text text-truncate"
  60             >{{'DASHBOARDS.VOICE_WAITING_TEXT' | translate | uppercase}}</span
  61           >
  62         </div>
  63       </ms-widget-front>
  64       <!-- / Front -->
  65
  66       <!-- Back -->
  67       <ms-widget-back class="p-16 grey-50-bg">
  68         <div class="flip-to-front">
  69           <md-button
  70             class="md-icon-button"
  71             ng-click="flipWidget()"
  72             aria-label="Flip widget"
  73           >
  74             <md-icon md-font-icon="icon-close" class="s16"></md-icon>
  75           </md-button>
  76         </div>
  77
  78         <div>{{'DASHBOARDS.HELP.VOICE_WAITING' | translate}}</div>
  79       </ms-widget-back>
  80       <!-- / Back -->
  81     </ms-widget>
  82     <!-- / WIDGET 1 -->
  83
  84     <!-- WIDGET 3 -->
  85     <ms-widget
  86       flippable="true"
  87       layout="column"
  88       flex="100"
  89       flex-gt-xs="50"
  90       flex-gt-md="20"
  91     >
  92       <!-- Front -->
  93       <ms-widget-front class="grey-50-bg">
  94         <div
  95           class="pl-16 pr-8 pv-16 h-55"
  96           layout="row"
  97           layout-align="space-between center"
  98         >
  99           <md-button
 100             class="md-icon-button"
 101             ng-click="flipWidget()"
 102             aria-label="more"
 103           >
 104             <md-icon md-font-icon="icon-dots-vertical"></md-icon>
 105           </md-button>
 106           <md-button
 107             style="cursor: auto"
 108             class="md-icon-button"
 109             aria-label="more"
 110           >
 111             <md-icon md-font-icon="icon-phone-in-talk"></md-icon>
 112           </md-button>
 113         </div>
 114
 115         <div class="pt-8 pb-32" layout="column" layout-align="center center">
 116           <div class="orange-fg font-size-52 line-height-72">
 117             {{(vm.inbound.talking || 0) + (vm.inbound.pTalking || 0)}}
 118           </div>
 119           <div class="h3 secondary-text font-weight-500">
 120             {{'DASHBOARDS.VOICE_TALKING' | translate | uppercase}}
 121           </div>
 122         </div>
 123
 124         <div
 125           class="p-16 grey-200-bg text-center border-top"
 126           layout-align="start center"
 127         >
 128           <span class="h6 orange-fg secondary-text text-truncate"
 129             >{{'DASHBOARDS.VOICE_TALKING_TEXT' | translate | uppercase}}</span
 130           >
 131         </div>
 132       </ms-widget-front>
 133       <!-- / Front -->
 134
 135       <!-- Back -->
 136       <ms-widget-back class="p-16 grey-50-bg">
 137         <div class="flip-to-front">
 138           <md-button
 139             class="md-icon-button"
 140             ng-click="flipWidget()"
 141             aria-label="Flip widget"
 142           >
 143             <md-icon md-font-icon="icon-close" class="s16"></md-icon>
 144           </md-button>
 145         </div>
 146
 147         <div>{{'DASHBOARDS.HELP.VOICE_TALKING' | translate}}</div>
 148       </ms-widget-back>
 149       <!-- / Back -->
 150     </ms-widget>
 151     <!-- / WIDGET 3 -->
 152
 153     <!-- WIDGET 2 -->
 154     <ms-widget
 155       flippable="true"
 156       layout="column"
 157       flex="100"
 158       flex-gt-xs="50"
 159       flex-gt-md="20"
 160     >
 161       <!-- Front -->
 162       <ms-widget-front class="grey-50-bg">
 163         <div
 164           class="ph-8 pv-16 h-55"
 165           layout="row"
 166           layout-align="space-between center"
 167         >
 168           <md-button
 169             class="md-icon-button"
 170             ng-click="flipWidget()"
 171             aria-label="more"
 172           >
 173             <md-icon md-font-icon="icon-dots-vertical"></md-icon>
 174           </md-button>
 175           <md-button
 176             style="cursor: auto"
 177             class="md-icon-button"
 178             aria-label="more"
 179           >
 180             <md-icon md-font-icon="icon-phone"></md-icon>
 181           </md-button>
 182         </div>
 183
 184         <div class="pt-8 pb-32" layout="column" layout-align="center center">
 185           <div class="red-fg font-size-52 line-height-72">
 186             {{vm.inbound.answered || 0}}
 187           </div>
 188           <div class="h3 secondary-text font-weight-500">
 189             {{'DASHBOARDS.VOICE_ANSWERED' | translate | uppercase}}
 190           </div>
 191         </div>
 192
 193         <div
 194           class="p-16 grey-200-bg text-center border-top"
 195           layout-align="start center"
 196         >
 197           <span class="h6 red-fg secondary-text text-truncate"
 198             >{{'DASHBOARDS.VOICE_ANSWERED_TEXT' | translate | uppercase}}</span
 199           >
 200         </div>
 201       </ms-widget-front>
 202       <!-- / Front -->
 203
 204       <!-- Back -->
 205       <ms-widget-back class="p-16 grey-50-bg">
 206         <div class="flip-to-front">
 207           <md-button
 208             class="md-icon-button"
 209             ng-click="flipWidget()"
 210             aria-label="Flip widget"
 211           >
 212             <md-icon md-font-icon="icon-close" class="s16"></md-icon>
 213           </md-button>
 214         </div>
 215
 216         <div>{{'DASHBOARDS.HELP.VOICE_ANSWERED' | translate}}</div>
 217       </ms-widget-back>
 218       <!-- / Back -->
 219     </ms-widget>
 220     <!-- / WIDGET 2 -->
 221
 222     <!-- WIDGET 4 -->
 223     <ms-widget
 224       flippable="true"
 225       layout="column"
 226       flex="100"
 227       flex-gt-xs="50"
 228       flex-gt-md="20"
 229     >
 230       <!-- Front -->
 231       <ms-widget-front class="grey-50-bg">
 232         <div
 233           class="pl-16 pr-8 pv-16 h-55"
 234           layout="row"
 235           layout-align="space-between center"
 236         >
 237           <md-button
 238             class="md-icon-button"
 239             ng-click="flipWidget()"
 240             aria-label="more"
 241           >
 242             <md-icon md-font-icon="icon-dots-vertical"></md-icon>
 243           </md-button>
 244           <md-button
 245             style="cursor: auto"
 246             class="md-icon-button"
 247             aria-label="more"
 248           >
 249             <md-icon md-font-icon="icon-phone-missed"></md-icon>
 250           </md-button>
 251         </div>
 252
 253         <div class="pt-8 pb-32" layout="column" layout-align="center center">
 254           <div class="blue-grey-fg font-size-52 line-height-72">
 255             {{vm.inbound.outboundDropCallsDayCallersExit || 0}}
 256           </div>
 257           <div class="h3 secondary-text font-weight-500">
 258             {{'DASHBOARDS.VOICE_ABANDONED' | translate | uppercase}}
 259           </div>
 260         </div>
 261
 262         <div
 263           class="p-16 grey-200-bg text-center border-top"
 264           layout-align="start center"
 265         >
 266           <span class="h6 blue-grey-fg secondary-text text-truncate"
 267             >{{'DASHBOARDS.VOICE_ABANDONED_TEXT' | translate | uppercase}}</span
 268           >
 269         </div>
 270       </ms-widget-front>
 271       <!-- / Front -->
 272
 273       <!-- Back -->
 274       <ms-widget-back class="p-16 grey-50-bg">
 275         <div class="flip-to-front">
 276           <md-button
 277             class="md-icon-button"
 278             ng-click="flipWidget()"
 279             aria-label="Flip widget"
 280           >
 281             <md-icon md-font-icon="icon-close" class="s16"></md-icon>
 282           </md-button>
 283         </div>
 284
 285         <div>{{'DASHBOARDS.HELP.ABANDON_RATE' | translate}}</div>
 286       </ms-widget-back>
 287       <!-- / Back -->
 288     </ms-widget>
 289     <!-- / WIDGET 4 -->
 290
 291     <!-- WIDGET 4 -->
 292     <ms-widget
 293       flippable="true"
 294       layout="column"
 295       flex="100"
 296       flex-gt-xs="50"
 297       flex-gt-md="20"
 298     >
 299       <!-- Front -->
 300       <ms-widget-front class="grey-50-bg">
 301         <div
 302           class="pl-16 pr-8 pv-16 h-55"
 303           layout="row"
 304           layout-align="space-between center"
 305         >
 306           <md-button
 307             class="md-icon-button"
 308             ng-click="flipWidget()"
 309             aria-label="more"
 310           >
 311             <md-icon md-font-icon="icon-dots-vertical"></md-icon>
 312           </md-button>
 313           <md-button
 314             style="cursor: auto"
 315             class="md-icon-button"
 316             aria-label="more"
 317           >
 318             <md-icon md-font-icon="icon-phone-outgoing"></md-icon>
 319           </md-button>
 320         </div>
 321
 322         <div class="pt-8 pb-32" layout="column" layout-align="center center">
 323           <div class="blue-green-fg font-size-52 line-height-72">
 324             {{vm.inbound.outboundDropCallsDayTimeout || 0}}
 325           </div>
 326           <div class="h3 secondary-text font-weight-500">
 327             {{'DASHBOARDS.DROPPED' | translate | uppercase}}
 328           </div>
 329         </div>
 330
 331         <div
 332           class="p-16 grey-200-bg text-center border-top"
 333           layout-align="start center"
 334         >
 335           <span class="h6 blue-green-fg secondary-text text-truncate"
 336             >{{'DASHBOARDS.DROPPED_TEXT' | translate | uppercase}}</span
 337           >
 338         </div>
 339       </ms-widget-front>
 340       <!-- / Front -->
 341
 342       <!-- Back -->
 343       <ms-widget-back class="p-16 grey-50-bg">
 344         <div class="flip-to-front">
 345           <md-button
 346             class="md-icon-button"
 347             ng-click="flipWidget()"
 348             aria-label="Flip widget"
 349           >
 350             <md-icon md-font-icon="icon-close" class="s16"></md-icon>
 351           </md-button>
 352         </div>
 353
 354         <div>{{'DASHBOARDS.HELP.DROPPED' | translate}}</div>
 355       </ms-widget-back>
 356       <!-- / Back -->
 357     </ms-widget>
 358     <!-- / WIDGET 4 -->
 359   </div>
 360   <!-- / WIDGET GROUP -->
 361
 362   <!-- WIDGET GROUP -->
 363   <div class="widget-group" layout="row" flex="100" layout-wrap>
 364     <!-- WIDGET 4 -->
 365     <ms-widget
 366       flippable="true"
 367       layout="column"
 368       flex="100"
 369       flex-gt-xs="50"
 370       flex-gt-md="20"
 371     >
 372       <!-- Front -->
 373       <ms-widget-front class="grey-50-bg">
 374         <div
 375           class="pl-16 pr-8 pv-16 h-55"
 376           layout="row"
 377           layout-align="space-between center"
 378         >
 379           <md-button
 380             class="md-icon-button"
 381             ng-click="flipWidget()"
 382             aria-label="more"
 383           >
 384             <md-icon md-font-icon="icon-dots-vertical"></md-icon>
 385           </md-button>
 386           <md-button
 387             style="cursor: auto"
 388             class="md-icon-button"
 389             aria-label="more"
 390           >
 391             <md-icon md-font-icon="icon-phone-dots"></md-icon>
 392           </md-button>
 393         </div>
 394
 395         <div class="pt-8 pb-32" layout="column" layout-align="center center">
 396           <div class="blue-green-fg font-size-52 line-height-72">
 397             {{vm.inbound.originated || 0}}
 398           </div>
 399           <div class="h3 secondary-text font-weight-500">
 400             {{'DASHBOARDS.ORIGINATED' | translate | uppercase}}
 401           </div>
 402         </div>
 403
 404         <div
 405           class="p-16 grey-200-bg text-center border-top"
 406           layout-align="start center"
 407         >
 408           <span class="h6 blue-green-fg secondary-text text-truncate"
 409             >{{'DASHBOARDS.ORIGINATED_TEXT' | translate | uppercase}}</span
 410           >
 411         </div>
 412       </ms-widget-front>
 413       <!-- / Front -->
 414
 415       <!-- Back -->
 416       <ms-widget-back class="p-16 grey-50-bg">
 417         <div class="flip-to-front">
 418           <md-button
 419             class="md-icon-button"
 420             ng-click="flipWidget()"
 421             aria-label="Flip widget"
 422           >
 423             <md-icon md-font-icon="icon-close" class="s16"></md-icon>
 424           </md-button>
 425         </div>
 426
 427         <div>{{'DASHBOARDS.HELP.ORIGINATED' | translate}}</div>
 428       </ms-widget-back>
 429       <!-- / Back -->
 430     </ms-widget>
 431     <!-- / WIDGET 4 -->
 432
 433     <!-- WIDGET 3 -->
 434     <ms-widget
 435       flippable="true"
 436       layout="column"
 437       flex="100"
 438       flex-gt-xs="50"
 439       flex-gt-md="20"
 440     >
 441       <!-- Front -->
 442       <ms-widget-front class="grey-50-bg">
 443         <div
 444           class="pl-16 pr-8 pv-16 h-55"
 445           layout="row"
 446           layout-align="space-between center"
 447         >
 448           <md-button
 449             class="md-icon-button"
 450             ng-click="flipWidget()"
 451             aria-label="more"
 452           >
 453             <md-icon md-font-icon="icon-dots-vertical"></md-icon>
 454           </md-button>
 455           <md-button
 456             style="cursor: auto"
 457             class="md-icon-button"
 458             aria-label="more"
 459           >
 460             <md-icon md-font-icon="icon-phone-in-talk"></md-icon>
 461           </md-button>
 462         </div>
 463
 464         <div class="pt-8 pb-32" layout="column" layout-align="center center">
 465           <div class="orange-fg font-size-42 line-height-72">
 466             {{ vm.inbound.avgTalkTime || '00:00:00' }}
 467           </div>
 468           <div class="h3 secondary-text font-weight-500">
 469             {{'DASHBOARDS.VOICE_AVG_TALK_TIME' | translate | uppercase}}
 470           </div>
 471         </div>
 472
 473         <div
 474           class="p-16 grey-200-bg text-center border-top"
 475           layout-align="start center"
 476         >
 477           <span class="h6 orange-fg secondary-text text-truncate"
 478             >{{'DASHBOARDS.VOICE_AVG_TALK_TIME_TEXT' | translate |
 479             uppercase}}</span
 480           >
 481         </div>
 482       </ms-widget-front>
 483       <!-- / Front -->
 484
 485       <!-- Back -->
 486       <ms-widget-back class="p-16 grey-50-bg">
 487         <div class="flip-to-front">
 488           <md-button
 489             class="md-icon-button"
 490             ng-click="flipWidget()"
 491             aria-label="Flip widget"
 492           >
 493             <md-icon md-font-icon="icon-close" class="s16"></md-icon>
 494           </md-button>
 495         </div>
 496
 497         <div>{{'DASHBOARDS.HELP.VOICE_AVG_TALK_TIME' | translate}}</div>
 498       </ms-widget-back>
 499       <!-- / Back -->
 500     </ms-widget>
 501     <!-- / WIDGET 3 -->
 502
 503     <!-- WIDGET 2 -->
 504     <ms-widget
 505       flippable="true"
 506       layout="column"
 507       flex="100"
 508       flex-gt-xs="50"
 509       flex-gt-md="20"
 510     >
 511       <!-- Front -->
 512       <ms-widget-front class="grey-50-bg">
 513         <div
 514           class="ph-8 pv-16 h-55"
 515           layout="row"
 516           layout-align="space-between center"
 517         >
 518           <md-button
 519             class="md-icon-button"
 520             ng-click="flipWidget()"
 521             aria-label="more"
 522           >
 523             <md-icon md-font-icon="icon-dots-vertical"></md-icon>
 524           </md-button>
 525           <md-button
 526             style="cursor: auto"
 527             class="md-icon-button"
 528             aria-label="more"
 529           >
 530             <md-icon md-font-icon="icon-percent"></md-icon>
 531           </md-button>
 532         </div>
 533
 534         <div class="pt-8 pb-32" layout="column" layout-align="center center">
 535           <div class="red-fg font-size-42 line-height-72">
 536             {{ vm.inbound.outboundanswerRate || 0 |number : 1}}%
 537           </div>
 538           <div class="h3 secondary-text font-weight-500">
 539             {{'DASHBOARDS.VOICE_ANSWER_RATE' | translate | uppercase}}
 540           </div>
 541         </div>
 542
 543         <div
 544           class="p-16 grey-200-bg text-center border-top"
 545           layout-align="start center"
 546         >
 547           <span class="h6 red-fg secondary-text text-truncate"
 548             >{{'DASHBOARDS.VOICE_ANSWER_RATE_TEXT' | translate |
 549             uppercase}}</span
 550           >
 551         </div>
 552       </ms-widget-front>
 553       <!-- / Front -->
 554
 555       <!-- Back -->
 556       <ms-widget-back class="p-16 grey-50-bg">
 557         <div class="flip-to-front">
 558           <md-button
 559             class="md-icon-button"
 560             ng-click="flipWidget()"
 561             aria-label="Flip widget"
 562           >
 563             <md-icon md-font-icon="icon-close" class="s16"></md-icon>
 564           </md-button>
 565         </div>
 566
 567         <div>{{'DASHBOARDS.HELP.VOICE_ANSWER_RATE' | translate}}</div>
 568       </ms-widget-back>
 569       <!-- / Back -->
 570     </ms-widget>
 571     <!-- / WIDGET 2 -->
 572
 573     <!-- WIDGET 4 -->
 574     <ms-widget
 575       flippable="true"
 576       layout="column"
 577       flex="100"
 578       flex-gt-xs="50"
 579       flex-gt-md="20"
 580     >
 581       <!-- Front -->
 582       <ms-widget-front class="grey-50-bg">
 583         <div
 584           class="pl-16 pr-8 pv-16 h-55"
 585           layout="row"
 586           layout-align="space-between center"
 587         >
 588           <md-button
 589             class="md-icon-button"
 590             ng-click="flipWidget()"
 591             aria-label="more"
 592           >
 593             <md-icon md-font-icon="icon-dots-vertical"></md-icon>
 594           </md-button>
 595           <md-button
 596             style="cursor: auto"
 597             class="md-icon-button"
 598             aria-label="more"
 599           >
 600             <md-icon md-font-icon="icon-percent"></md-icon>
 601           </md-button>
 602         </div>
 603
 604         <div class="pt-8 pb-32" layout="column" layout-align="center center">
 605           <div class="blue-grey-fg font-size-42 line-height-72">
 606             {{ vm.inbound.outboundAbandonRate || 0}}%
 607           </div>
 608           <div class="h3 secondary-text font-weight-500">
 609             {{'DASHBOARDS.VOICE_ABANDON_RATE' | translate | uppercase}}
 610           </div>
 611         </div>
 612
 613         <div
 614           class="p-16 grey-200-bg text-center border-top"
 615           layout-align="start center"
 616         >
 617           <span class="h6 blue-grey-fg secondary-text text-truncate"
 618             >{{'DASHBOARDS.VOICE_ABANDON_RATE_TEXT' | translate |
 619             uppercase}}</span
 620           >
 621         </div>
 622       </ms-widget-front>
 623       <!-- / Front -->
 624
 625       <!-- Back -->
 626       <ms-widget-back class="p-16 grey-50-bg">
 627         <div class="flip-to-front">
 628           <md-button
 629             class="md-icon-button"
 630             ng-click="flipWidget()"
 631             aria-label="Flip widget"
 632           >
 633             <md-icon md-font-icon="icon-close" class="s16"></md-icon>
 634           </md-button>
 635         </div>
 636
 637         <div>{{'DASHBOARDS.HELP.VOICE_ABANDON_RATE' | translate}}</div>
 638       </ms-widget-back>
 639       <!-- / Back -->
 640     </ms-widget>
 641     <!-- / WIDGET 4 -->
 642
 643     <!-- WIDGET 4 -->
 644     <ms-widget
 645       flippable="true"
 646       layout="column"
 647       flex="100"
 648       flex-gt-xs="50"
 649       flex-gt-md="20"
 650     >
 651       <!-- Front -->
 652       <ms-widget-front class="grey-50-bg">
 653         <div
 654           class="pl-16 pr-8 pv-16 h-55"
 655           layout="row"
 656           layout-align="space-between center"
 657         >
 658           <md-button
 659             class="md-icon-button"
 660             ng-click="flipWidget()"
 661             aria-label="more"
 662           >
 663             <md-icon md-font-icon="icon-dots-vertical"></md-icon>
 664           </md-button>
 665           <md-button
 666             style="cursor: auto"
 667             class="md-icon-button"
 668             aria-label="more"
 669           >
 670             <md-icon md-font-icon="icon-percent"></md-icon>
 671           </md-button>
 672         </div>
 673
 674         <div class="pt-8 pb-32" layout="column" layout-align="center center">
 675           <div class="blue-grey-fg font-size-42 line-height-72">
 676             {{ vm.inbound.outboundDropRate }}%
 677           </div>
 678           <div class="h3 secondary-text font-weight-500">
 679             {{'DASHBOARDS.DROP_RATE' | translate | uppercase}}
 680           </div>
 681         </div>
 682
 683         <div
 684           class="p-16 grey-200-bg text-center border-top"
 685           layout-align="start center"
 686         >
 687           <span class="h6 blue-grey-fg secondary-text text-truncate"
 688             >{{'DASHBOARDS.DROP_RATE_TEXT' | translate | uppercase}}</span
 689           >
 690         </div>
 691       </ms-widget-front>
 692       <!-- / Front -->
 693
 694       <!-- Back -->
 695       <ms-widget-back class="p-16 grey-50-bg">
 696         <div class="flip-to-front">
 697           <md-button
 698             class="md-icon-button"
 699             ng-click="flipWidget()"
 700             aria-label="Flip widget"
 701           >
 702             <md-icon md-font-icon="icon-close" class="s16"></md-icon>
 703           </md-button>
 704         </div>
 705
 706         <div>{{'DASHBOARDS.HELP.DROP_RATE' | translate}}</div>
 707       </ms-widget-back>
 708       <!-- / Back -->
 709     </ms-widget>
 710     <!-- / WIDGET 4 -->
 711   </div>
 712   <!-- / WIDGET GROUP -->
 713 </div>
 714 <!-- / WIDGET OUTBOUND -->
 715
 716 <!-- WIDGET INBOUND -->
 717 <div class="dashboard-container md-background-bg md-whiteframe-1dp">
 718   <div class="pb-16" layout="row" layout-align="start center">
 719     <md-icon md-font-icon="icon-phone-outgoing" class="m-0 mr-16"></md-icon>
 720     <div
 721       class="h2 secondary-text"
 722       translate="DASHBOARDS.TODAY_IVR_CAMPAIGNS_STATS"
 723     >
 724       Today IVR campaigns stats
 725     </div>
 726   </div>
 727
 728   <!-- WIDGET GROUP -->
 729   <div class="widget-group" layout="row" flex="100" layout-wrap>
 730     <!-- WIDGET 4 -->
 731     <ms-widget
 732       flippable="true"
 733       layout="column"
 734       flex="100"
 735       flex-gt-xs="50"
 736       flex-gt-md="20"
 737     >
 738       <!-- Front -->
 739       <ms-widget-front class="grey-50-bg">
 740         <div
 741           class="pl-16 pr-8 pv-16 h-55"
 742           layout="row"
 743           layout-align="space-between center"
 744         >
 745           <md-button
 746             class="md-icon-button"
 747             ng-click="flipWidget()"
 748             aria-label="more"
 749           >
 750             <md-icon md-font-icon="icon-dots-vertical"></md-icon>
 751           </md-button>
 752           <md-button
 753             style="cursor: auto"
 754             class="md-icon-button"
 755             aria-label="more"
 756           >
 757             <md-icon md-font-icon="icon-phone-dots"></md-icon>
 758           </md-button>
 759         </div>
 760
 761         <div class="pt-8 pb-32" layout="column" layout-align="center center">
 762           <div class="blue-green-fg font-size-52 line-height-72">
 763             {{vm.ivr.originated || 0}}/{{vm.ivr.limitCalls || 0}}
 764           </div>
 765           <div class="h3 secondary-text font-weight-500">
 766             {{'DASHBOARDS.ORIGINATED' | translate |
 767             uppercase}}/{{'DASHBOARDS.LIMITED' | translate | uppercase}}
 768           </div>
 769         </div>
 770
 771         <div
 772           class="p-16 grey-200-bg text-center border-top"
 773           layout-align="start center"
 774         >
 775           <span class="h6 blue-green-fg secondary-text text-truncate"
 776             >{{'DASHBOARDS.LIMITED_TEXT' | translate | uppercase}}</span
 777           >
 778         </div>
 779       </ms-widget-front>
 780       <!-- / Front -->
 781
 782       <!-- Back -->
 783       <ms-widget-back class="p-16 grey-50-bg">
 784         <div class="flip-to-front">
 785           <md-button
 786             class="md-icon-button"
 787             ng-click="flipWidget()"
 788             aria-label="Flip widget"
 789           >
 790             <md-icon md-font-icon="icon-close" class="s16"></md-icon>
 791           </md-button>
 792         </div>
 793
 794         <div>{{'DASHBOARDS.HELP.ORIGINATEDLIMITED' | translate}}</div>
 795       </ms-widget-back>
 796       <!-- / Back -->
 797     </ms-widget>
 798     <!-- / WIDGET 4 -->
 799   </div>
 800   <!-- / WIDGET GROUP -->
 801 </div>
 802 <!-- / WIDGET IVR -->